<template>
    <div>
        <!-- 作者 -->
        <div class="search_Enter_writer">
            <div class="SEW_Box">
                <div class="SearchContainer">
                    <div class="SEWB_Content">
                        <div class="SEWBC_Img">
                            <img src="" alt="">
                        </div>
                        <div class="SEWBC_Text">
                            <div class="SEWBCT_writer">
                                <span class="SEWBCTW_name">月茶</span>
                                <span class="SEWBCTW_tag">
                                    <span>作者</span>
                                </span>
                            </div>
                            <div class="SEWBCT_introduce">
                                <span>作品: 《冷面弟弟惹不得》《将军夫人惹不得》</span>
                            </div>
                        </div>
                        <!-- <div class="SEWBCT_Enter"> -->
                            <router-link tag="div" class="SEWBCT_Enter" to="/writerPage">
                                <span class="iconfont icon-youjiantou1"></span>
                            </router-link>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索内容 -->
        <div class="search_EnterBox">
            <div class="SearchContainer">
                <div class="SEB_Content">
                    <div class="SEBC_Img">
                        <img src="" alt="">
                    </div>
                    <div class="SEBC_Text">
                        <p class="SEBCT_name">爱啊美啊人生啊</p>
                        <p class="SEBCT_writer">石川啄木</p>
                        <p class="SEBCT_introduce">石川啄木的三行对歌日常生活，四季变化，亲友孩童，乡间风俗等均有独特的描写</p>
                        <p class="SEBCT_tag">文学艺术·歌词歌赋·完结·5万字</p>
                    </div>
                </div>
                <div class="SEB_Content">
                    <div class="SEBC_Img">
                        <img src="" alt="">
                    </div>
                    <div class="SEBC_Text">
                        <p class="SEBCT_name">爱啊美啊人生啊</p>
                        <p class="SEBCT_writer">石川啄木</p>
                        <p class="SEBCT_introduce">石川啄木的三行对歌日常生活，四季变化，亲友孩童，乡间风俗等均有独特的描写</p>
                        <p class="SEBCT_tag">文学艺术·歌词歌赋·完结·5万字</p>
                    </div>
                </div>
                <div class="SEB_Content">
                    <div class="SEBC_Img">
                        <img src="" alt="">
                    </div>
                    <div class="SEBC_Text">
                        <p class="SEBCT_name">爱啊美啊人生啊</p>
                        <p class="SEBCT_writer">石川啄木</p>
                        <p class="SEBCT_introduce">石川啄木的三行对歌日常生活，四季变化，亲友孩童，乡间风俗等均有独特的描写</p>
                        <p class="SEBCT_tag">文学艺术·歌词歌赋·完结·5万字</p>
                    </div>
                </div>
                <div class="SEB_Content">
                    <div class="SEBC_Img">
                        <img src="" alt="">
                    </div>
                    <div class="SEBC_Text">
                        <p class="SEBCT_name">爱啊美啊人生啊</p>
                        <p class="SEBCT_writer">石川啄木</p>
                        <p class="SEBCT_introduce">石川啄木的三行对歌日常生活，四季变化，亲友孩童，乡间风俗等均有独特的描写</p>
                        <p class="SEBCT_tag">文学艺术·歌词歌赋·完结·5万字</p>
                    </div>
                </div>
                <div class="SEB_Content">
                    <div class="SEBC_Img">
                        <img src="" alt="">
                    </div>
                    <div class="SEBC_Text">
                        <p class="SEBCT_name">爱啊美啊人生啊</p>
                        <p class="SEBCT_writer">石川啄木</p>
                        <p class="SEBCT_introduce">石川啄木的三行对歌日常生活，四季变化，亲友孩童，乡间风俗等均有独特的描写</p>
                        <p class="SEBCT_tag">文学艺术·歌词歌赋·完结·5万字</p>
                    </div>
                </div>
                <div class="SEB_Content">
                    <div class="SEBC_Img">
                        <img src="" alt="">
                    </div>
                    <div class="SEBC_Text">
                        <p class="SEBCT_name">爱啊美啊人生啊</p>
                        <p class="SEBCT_writer">石川啄木</p>
                        <p class="SEBCT_introduce">石川啄木的三行对歌日常生活，四季变化，亲友孩童，乡间风俗等均有独特的描写</p>
                        <p class="SEBCT_tag">文学艺术·歌词歌赋·完结·5万字</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="search_bottom">
            <p class="bigText">免费看书100年</p>
            <p>七猫免费小说</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    }
}
</script>

<style lang="less">
.SearchContainer{
    width: 91%;
    margin: 0px auto;
}
.search_Enter_writer{
    border-bottom:10px solid #eee;
    .SEW_Box{
        .SEWB_Content{
            display: flex;
            align-items: center;
            padding: 10px 0px;
            justify-content: space-between;
            .SEWBC_Img{
                width: 50px;
                height: 50px;
                background-color: pink;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .SEWBC_Text{
                width: 75%;
                .SEWBCT_writer{
                    display: flex;
                    align-items: center;
                    .SEWBCTW_name{
                        font-weight: bold;
                        margin-right: 10px;
                    }
                    .SEWBCTW_tag{
                        span{
                            font-size: 12px;
                            padding: 2px 4px;
                            background-color: #fdcd0b;
                            border-radius: 5px;
                        }
                    }
                }
                .SEWBCT_introduce{
                    margin-top: 6px;
                    span{
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                        color: #aaa;
                        font-size: 14px;
                    }
                }
            }
            .SEWBCT_Enter{
                span{
                    color: #ccc;
                }
            }
        }
    }
}
.search_EnterBox{
    .SEB_Content{
        display: flex;
        padding: 10px 0px;
        padding-top: 20px;
        .SEBC_Img{
            width: 70px;
            height: 90px;
            background-color: aqua;
            margin-right: 15px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .SEBC_Text{
            width: 75%;
            p{
                line-height: 22px;
                letter-spacing: 0.5px;
            }
            p.SEBCT_name{
                font-weight: bold;
                line-height: 32px;
            }
            p.SEBCT_writer{
                font-size: 14px;
                color: #aaa;
            }
            p.SEBCT_introduce{
                width: 100%;
                font-size: 14px;
                color: #aaa;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            p.SEBCT_tag{
                font-size: 14px;
                color: #aaa;
            }
        }
    }
}
.search_bottom{
    background-color: #fff;
    text-align: center;
    color: #eaeaea;
    padding-top: 30px;
    padding-bottom: 50px;
    .bigText{
        font-size: 22px;
        font-weight: bold;
    }
}
</style>